<template>
	<div class="area main">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<i data-v-3fc50d94="" class="el-icon"><svg data-v-3fc50d94="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M288 896h448q32 0 32 32t-32 32H288q-32 0-32-32t32-32"></path><path fill="currentColor" d="M800 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576C705.472 688.128 800 534.144 800 416M512 960C277.312 746.688 160 565.312 160 416a352 352 0 0 1 704 0c0 149.312-117.312 330.688-352 544"></path><path fill="currentColor" d="M512 512a96 96 0 1 0 0-192 96 96 0 0 0 0 192m0 64a160 160 0 1 1 0-320 160 160 0 0 1 0 320"></path></svg></i>库位信息
				</div>
			</template>
			<el-form ref="formRef" :inline="true" :model="form"
				class="search-form bg-bg_color w-[99/100] pl-8 overflow-auto">
				<el-form-item label="所属仓库:">
					{{warehouseAreaInfo?.warehouse?.name ?? ""}}
				</el-form-item>
				<el-form-item label="所属库区:">
					{{warehouseAreaInfo?.name ?? ""}}
				</el-form-item>
				<el-form-item label="库位名称:">
					<el-input v-model="form.name" class="!w-[180px]" clearable placeholder="请输入库位名称" />
				</el-form-item>
				<el-form-item label="库位编码:">
					<el-input v-model="form.code" class="!w-[180px]" clearable placeholder="请输入库位编码" />
				</el-form-item>
				<el-form-item label="状态:">
					<el-select v-model="form.status" class="!w-[180px]" placeholder="请选择状态" clearable>
						<el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading"
						@click="getInitData">
						搜索
					</el-button>
					<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
						重置
					</el-button>
				</el-form-item>
			</el-form>
			<div ref="contentRef" class="flex">
				<pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto"
					:loading="loading" size="large" adaptive :adaptiveConfig="{ offsetBottom: 108 }" :data="dataList"
					:columns="columns" :pagination="pagination" :paginationSmall="true" :header-cell-style="{
					background: 'var(--el-fill-color-light)',color: 'var(--el-text-color-primary)'
					}" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange" style="height: 220px;">

					<template #status="{ row }">
						<el-tag size="large" :type="row.status===1?'primary':'danger'" effect="light">
							{{row.status===1?'启用':'停用'}}
						</el-tag>
					</template>
					<!-- <template #operation="{ row }">
						<el-tooltip class="box-item" effect="dark" content="库位信息" placement="top">
							<el-button class="reset-margin !outline-none" link type="primary" size="large"
								:icon="useRenderIcon(Look)" @click="onDetail(row)">
							</el-button>
						</el-tooltip>
					</template> -->
				</pure-table>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts">
	import {
		onBeforeMount,
		onMounted,
		ref,
		defineProps,
		reactive,
		watchEffect,
		toRaw,
		onBeforeUnmount,
		h
	} from "vue";
	import {
		getWarehouseLocationListApi,
	} from "@/api/warehouseApi";
	import type { PaginationProps } from "@pureadmin/table";
	import { PureTableBar } from "@/components/RePureTableBar";
	import { useRenderIcon } from "@/components/ReIcon/src/hooks";
	import Refresh from "@iconify-icons/ep/refresh";
	import { emitter } from "@/utils/mitt";
	import Look from "@iconify-icons/ep/view";
	import Details from "./detail.vue";
	import { addDialog } from "@/components/ReDialog";
	const props = defineProps({
		warehouseAreaInfo: {
			type: Object,
			required: true,
			default: () => { }
		},
	});
	const formRef = ref();
	const dataList = ref([])
	const loading = ref(false)
	const form = reactive({
		page: 1,
		perPage: 10,
		name: null,
		code: null,
		status: null,
		warehouseAreaId: null,
	});
	const pagination = reactive<PaginationProps>({
		total: 0,
		pageSize: 10,
		currentPage: 1,
		background: true
	});
	const warehouseAreaInfo = ref({})
	const statusOptions = ref([
		{
			value: 1,
			label: '启用'
		},
		{
			value: 2,
			label: '禁用'
		}
	])
	watchEffect(() => {
		form.warehouseAreaId = props.warehouseAreaInfo.warehouseAreaId
		warehouseAreaInfo.value = props.warehouseAreaInfo
		if(form.warehouseAreaId) {
			getInitData()
		}
	})
	
	function getInitData() {
		loading.value = true
		getWarehouseLocationListApi(toRaw(form)).then((res) => {
			setTimeout(() => {
				loading.value = false;
			}, 150);
			if (res?.code === 200) {
				dataList.value = res.result.list;
				pagination.total = res.result.total;
				pagination.pageSize = res.result.per_page;
				pagination.currentPage = res.result.current_page;
			}

		})
	}
	const getStatusType = (type, text = false) => {
		switch (type) {
			case 1:
				return text ? "启用" : "primary";
			case 2:
				return text ? "禁用" : "danger";
		}
	};
	const columns : TableColumnList = [
		{
			label: "库位名称",
			prop: "name",
			minWidth: 100
		},
		{
			label: "库位编码",
			prop: "code",
			minWidth: 120
		},
		{
			label: "所属仓库",
			prop: "warehouse.name",
			minWidth: 100
		},
		{
			label: "所属库区",
			prop: "warehouseArea.name",
			minWidth: 100
		},
		{
			label: "状态",
			prop: "status",
			slot: "status",
			minWidth: 100
		},
		{
			label: "排",
			prop: "row",
			minWidth: 80
		},
		{
			label: "列",
			prop: "column",
			minWidth: 80
		},
		{
			label: "层",
			prop: "storey",
			minWidth: 80
		},
		{
			label: "创建者",
			prop: "createUser.username",
			minWidth: 80
		},
		{
			label: "创建时间",
			prop: "createdAt",
			minWidth: 180
		},
		{
			label: "更新者",
			prop: "updateUser.username",
			minWidth: 80
		},
		{
			label: "更新时间",
			prop: "updatedAt",
			minWidth: 180
		},
		// {
		// 	label: "操作",
		// 	fixed: "right",
		// 	slot: "operation",
		// }
	];
	const handleSizeChange = (val : number) => {
		loading.value = true;
		form.page = 1;
		form.perPage = val;
		getWarehouseLocationListApi(toRaw(form)).then(res => {
			dataList.value = res.result.list;
			pagination.total = res.result.total;
			pagination.pageSize = res.result.per_page;
			pagination.currentPage = 1;
		});

		setTimeout(() => {
			loading.value = false;
		}, 150);
	}

	const handleCurrentChange = (val : number) => {
		loading.value = true;
		form.page = val;
		getWarehouseLocationListApi(toRaw(form)).then(res => {
			dataList.value = res.result.list;
			pagination.total = res.result.total;
			pagination.pageSize = res.result.per_page;
			pagination.currentPage = res.result.current_page;
		});

		setTimeout(() => {
			loading.value = false;
		}, 150);
	}
	const resetForm = formEl => {
		if (!formEl) return;
		form.name = null;
		form.code = null;
		form.status = null;
		formEl.resetFields();
		getInitData();
	};
	const onDetail = (row) => {
		addDialog({
			title: '库位信息',
			top: "5vh",
			width: "40%",
			hideFooter: true,

			contentRenderer: () => h(Details),
			props: {
				info: [row]
			}
		});
	}
</script>

<style scoped>
	.card-header {
		display: flex;
		align-items: center;
	}

	.card-header i {
		margin-right: 5px;
	}

	:deep(.el-card__header) {
		padding: 14px 15px 7px !important;
		min-height: 40px;
	}

	:deep(.el-pagination) {
		margin-bottom: 0 !important;
	}
</style>